<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="http://jigsaw.test/css/main.css">
    </head>
    <body class="border-t-3 border-primary full-height">

        <nav class="navbar navbar-brand">
            <div class="container">
                <div class="navbar-content">
                    <div>
                        <a class="link-plain text-xxl flex-y-center" href="http://jigsaw.test">
                            <strong>Jigsaw Collections Demo</strong>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container m-xs-b-6">
            <div class="row">

                <div class="col-xs-4">
                    <nav class="nav-list">
    <a class="nav-list-item " href="http://jigsaw.test/posts">
        <icon></icon>Posts
    </a>

    <a class="nav-list-item selected" href="http://jigsaw.test/pagination">
        <icon></icon>Pagination
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/categories/news">
        <icon></icon>Categories
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/people">
        <icon></icon>People
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/variables">
        <icon></icon>Variables
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/json-test.json">
        <icon></icon>JSON
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/text-test.txt">
        <icon></icon>Text
    </a>
</nav>
                    <div class="panel m-xs-t-6">
    <div class="panel-heading">
        <h4 class="text-sm wt-light text-uppercase text-brand">Page meta</h4>
    </div>

    <div class="panel-body">
        <div class="p-xs-b-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Filename:</p>
            <p class="p-xs-l-2 text-sm">pagination</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Extension:</p>
            <p class="p-xs-l-2 text-sm">blade.php</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Path:</p>
            <p class="p-xs-l-2 text-sm">/pagination/2/</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Base URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test/pagination/2/</p>
        </div>

        <div class="p-xs-t-4">
            <p class="text-xs text-dark-soft text-uppercase">Global Variable:</p>
            <p class="p-xs-l-2 text-sm">some global variable</p>
        </div>
    </div>
</div>
                                    </div>

                <div class="col-xs-8 demo-page">
                    <h2>Pagination</h2>

<h3>Testing default perPage: 4</h3>

<div class="p-xs-y-3 border-b">
    <div class="row">
        <div class="col-xs-6">
            <h4 class="text-uppercase text-dark-soft wt-light">
                Current page: 2
            </h4>
            <h4 class="text-uppercase text-dark-soft wt-light">
                Total pages: 4
            </h4>
            <h4 class="text-uppercase text-dark-soft">
                Test of a local variable: Successful!
            </h4>
        </div>
        <div class="col-xs-6 text-right">
                            <a href="http://jigsaw.test/pagination">&lt;&lt;</a>
                <a href="http://jigsaw.test/pagination">&lt;</a>
            
                            <a href="http://jigsaw.test/pagination" class="pagination__number ">1</a>
                            <a href="http://jigsaw.test/pagination/2" class="pagination__number selected">2</a>
                            <a href="http://jigsaw.test/pagination/3" class="pagination__number ">3</a>
                            <a href="http://jigsaw.test/pagination/4" class="pagination__number ">4</a>
            
                            <a href="http://jigsaw.test/pagination/3">&gt;</a>
                <a href="http://jigsaw.test/pagination/4">&gt;&gt;</a>
                    </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <h3><a href="http://jigsaw.test/posts/3-third-post/">My Third Post</a></h3>
        <p class="text-sm">by Keith Damiani · 03/01/2016 · Number 4</p>
        <div class="p-xs-b-6 border-b"></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <h3><a href="http://jigsaw.test/posts/4-fourth-post/">My Fourth Post</a></h3>
        <p class="text-sm">by Matt Stauffer · 04/01/2016 · Number 3</p>
        <div class="p-xs-b-6 border-b"><div class="panel p-xs-4 m-xs-y-4">
    <h4>A Blade/Markdown hybrid.</h4>
</div>

<p>This filename ends with <code>blade.md</code> and is processed by both the Blade parser (first) and then the Markdown parser (second).</p>

<p>So you can mix <code>{{ strtoupper($page-&gt;some_variable) }}</code> and <code>Markdown</code> directives in the same file.</p>

<blockquote>
  <p>Note that in <code>blade.md</code> files, <code>section</code> can be omitted (as it can in any <code>.md</code> file).</p>
</blockquote>

<p>You can also <strong>include</strong> any type of file, which will get parsed based on its own file type:</p>

<ul>
<li><p>@include('include-test-markdown')</p></li>
<li><p>@include('include-test-blade')</p></li>
<li><p>@include('include-test-both')</p></li>
<li><p>@include('include-test-text')</p></li>
</ul>
</div>
    </div>
</div>

                </div>
            </div>
        </div>
    </body>
</html>
<!DOCTYPE html>
